<template>
  <div>
    <div class="content">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="课题名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入课题名称"></el-input>
        </el-form-item>
        <el-form-item label="课题简介" prop="introduction">
          <el-input v-model="ruleForm.introduction" placeholder="请输入课题简介"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      ruleForm: {
        name: '',
        introduction: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入课题名称', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push('/ChatRoom?coursename=' + this.ruleForm.name)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}

</script>
<style lang="scss" scoped>
.content {
  width: 600px;
  margin: 30px auto;
  padding: 50px 30px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .2);
}

>>>pre {
  background-color: #f5f2f2 !important;
  padding: 10px;
  border-radius: 3px;
  white-space: inherit;
  white-space: pre-wrap !important;
}
</style>